<template>
  <div class="home_page">
    <el-button
      type="primary"
      plain
      @click="add_classification"
    >新增分类</el-button>
    <el-button
      type="danger"
      plain
      @click="delete_classification"
    >删除分类</el-button>
    <div
      class="input_box"
      style="margin-bottom: 10px;"
    >
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="width: 200px"
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
      >搜索</el-button>
    </div>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        label=""
        width="95"
      >
        <template
          slot="header"
          slot-scope="scope"
        >
          <el-checkbox
            v-model="checkedAll"></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="分类编号"
        width="95"
      >
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column
        label="设备分类"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.classification }}
        </template>
      </el-table-column>
      <el-table-column
        label="描述"
        width="885"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.describe }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      layout="prev, pager, next"
      :total="50"
    >
    </el-pagination>
   <!--  新增设备分类 -->
    <el-dialog
      title="新增分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="分类设备">
          <el-input
            v-model="formLabelAlign.classification"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="formLabelAlign.describe"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >

        <el-button
          @click="dialogVisible = false">取
          消</el-button>
        <el-button
          type="primary"
          @click="confirm"
        >确
          定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑设备分类 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="edit_popup"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="edit"
      >
        <el-form-item label="分类设备">
          <el-input
            v-model="edit.classification"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="edit.describe"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >

        <el-button
          @click="edit_popup = false">取
          消</el-button>
        <el-button
          type="primary"
          @click="confirm2"
        >确
          定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { getList } from '@/api/home-page'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },

  },
  data() {
    return {
      list: null,
      listLoading: true,
      checkedAll: false,
      dialogVisible: false,
      edit_popup: false,
      input: "",
      value: "",
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: '',
        classification: '',
        describe: '',
      },
      edit: {
        classification: "",
        describe: "",
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    //新增设备分类取消按钮
    delete_classification() {
      
    },
    add_classification() {
      this.dialogVisible = true
    },
    confirm() {
      if (this.formLabelAlign.classification == '') {
        this.$message({
          message: '设备分类不能为空',
          type: 'warning'
        });
      }
      if (this.formLabelAlign.describe == '') {
        this.$message({
          message: '描述不能为空',
          type: 'warning'
        });
      }
     /*  this.dialogVisible = false
      this.formLabelAlign.classification = ''
      this.formLabelAlign.describe = '' */
    },
    //编辑设备分类
    handleEdit(data) {
      console.log(data);
      this.edit.classification = data.classification
      this.edit.describe = data.describe
      this.edit_popup = true
    },
    confirm2() {
      if (this.edit.classification == '') {
        this.$message({
          message: '设备分类不能为空',
          type: 'warning'
        });
      }
      if (this.edit.describe == '') {
        this.$message({
          message: '描述不能为空',
          type: 'warning'
        });
      }
    },
   /*  confirm2() {
      this.edit_popup = false
      this.edit.classification = ''
      this.edit.describe = ''
    }, */
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>
<style>
.home_page {
  padding: 10px;
}

.input_box {
  float: right;
}

.pager {
  float: right;
  margin: 10px 0;
}
</style>
